<template>
    <div class="bookstore-main">
        <div class="com-header">
            <div class="tab-header">
                <button v-for="(item,index) in tabHeader" :key="index" :class="{'select-button':tabHeaderFlag==item.flag}" @click="selectTab(item.flag)">{{item.title}}</button>
            </div>
            <i class="search-icon" @click="$router.push('/bookshelf/search')"></i>
        </div>
        <!-- 网页内容区域 -->
        <div class="view-content have-tabbar">
            <div v-show="tabHeaderFlag=='essence'" class="child-wrapper">
                <Essence :choice="novelData.choice" v-if="novelData.choice"></Essence>
            </div>
            <div v-show="tabHeaderFlag=='boys'" class="child-wrapper">
                <Man :manRanking='novelData.boyRanking' sexStr='boy' v-if="novelData.boyRanking"></Man>
            </div>
            <div v-show="tabHeaderFlag=='girls'" class="child-wrapper">
                <Man :manRanking='novelData.girlRanking' sexStr='girl' v-if="novelData.girlRanking"></Man>
            </div>
            <div v-show="tabHeaderFlag=='classify'" class="child-wrapper">
                <Classify :classList='novelData.classList' v-if="novelData.classList"></Classify>
            </div>
        </div>
        <ComFooter :selectedIndex="1"></ComFooter>
  </div>
</template>

<script>
  import {Toast} from 'mint-ui'
  import api from '~/plugins/api.js'
  import axios from 'axios'
  import storage from 'localforage'
  import Essence from '~/components/essence'
  import Man from '~/components/man'
  import Classify from '~/components/classify'
  export default {
    head: {
        title: '快眼看书 - 新版快眼看书 - 小说搜索网',
        meta: [{
            name: 'description',
            content: '快眼看书小说搜索引擎聚合网络各大小说网站最新小说章节,无广告无弹窗全文阅读.'
        },{
            name: 'keyWords',
            content: '快眼看书,kuaiyankanshu,小说搜索,小说搜索网,小说分类,小说排行'
        }]
    },
    data () {
        return {
            tabHeader: [{
                title: '精选',
                flag: 'essence'
            },{
                title: '男生',
                flag: 'boys'
            },{
                title: '女生',
                flag: 'girls'
            },{
                title: '分类',
                flag: 'classify'
            }],
            tabHeaderFlag: '',//默认精选
            novelData: {}
      }
    },
    created() {
        console.log('----------',process.server)
        if(!process.server){
            this.initData()
        }
    },
    methods: {
        async initData() {
            // 头部选中
            let tabHeaderFlag = await storage.getItem('tabHeaderFlag')
            this.tabHeaderFlag = tabHeaderFlag ? tabHeaderFlag : 'essence'

            // 精选页 - 取缓存
            let choice = await storage.getItem('choice')
            if(choice){
                this.$set(this.novelData,'choice',choice)
            }

            // 男生排行榜 - 取缓存
            let boyRanking = await storage.getItem('boyRanking')
            if(boyRanking){
                this.$set(this.novelData,'boyRanking',boyRanking)
            }

             // 女生排行榜 - 取缓存
            let girlRanking = await storage.getItem('girlRanking')
            if(girlRanking){
                this.$set(this.novelData,'girlRanking',girlRanking)
            }

            // 分类页 - 取缓存
            let classList = await storage.getItem('classList')
            if(classList){
                this.$set(this.novelData,'classList',classList)
            }
           
            this.getChoice()
            this.getClassList()
            this.getBoyRankingIndex()
            this.getGirlRankingIndex()
            
        },
        // 精选页 - 请求数据
        async getChoice() {
            let result = await axios.get(api.choice)
            if(result){
                this.$set(this.novelData,'choice',result.data.data)
                storage.setItem('choice',result.data.data)
            }
        },
        // 男生排行榜 - 请求最新数据
        async getBoyRankingIndex() {
            let paramsData = {
                gender: 'boy'
            }
            let result = await axios.get(api.rankingIndex,{params:paramsData})
            if(result){
                this.$set(this.novelData,'boyRanking',result.data.data)
                storage.setItem('boyRanking',result.data.data)
            }
        },
        // 女生排行榜 - 请求最新数据
        async getGirlRankingIndex() {
            let paramsData = {
                gender: 'girl'
            }
            let result = await axios.get(api.rankingIndex,{params:paramsData})
            if(result){
                this.$set(this.novelData,'girlRanking',result.data.data)
                storage.setItem('girlRanking',result.data.data)
            }
        },
        // 分类页 - 请求数据
        async getClassList() {
            let result = await axios.get(api.classList)
            if(result){
                this.$set(this.novelData,'classList',result.data.data)
                storage.setItem('classList',result.data.data)
            }
        },
        // 顶部tab
        selectTab(flag) {
            this.tabHeaderFlag = flag
            storage.setItem('tabHeaderFlag', flag)
        }
    },
    async asyncData(){
        // 服务端渲染
        if(process.server){ 
            let [choiceData, classListData,boyRankingData,girlRankingData] = await axios.all([
              axios.get(api.choice),
              axios.get(api.classList),
              axios.get(api.rankingIndex,{params:{gender:'boy'}}),
              axios.get(api.rankingIndex,{params:{gender:'girl'}})
            ])
            return {
                novelData: { 
                    choice: choiceData.data.data,
                    classList: classListData.data.data,
                    boyRanking: boyRankingData.data.data,
                    girlRanking: girlRankingData.data.data
                }
            }
        }
    },
    components: {
        Essence,
        Man,
        Classify
    }
  }
</script>
